<section id="help" class="container">
  <h2>Help</h2>
  <p>Have a question? Look for it in the FAQ below. No luck there? Try our <a href="https://knightlab.zendesk.com/forums/22551396-TimelineJS" target="_blank">community support forum</a>. You may also find some answers in the old Google group <a href="https://groups.google.com/forum/#!forum/verite-timeline" target="_blank">archive</a>, although it is no longer an active discussion forum. </p>
  <div class="row">
    <div class="span12">
      <div id="accordion-faq" class="accordion">
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-02" class="accordion-toggle collapsed">What browsers does TimelineJS support?</a></div>
            <div id="faq-02" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner"><p>All modern browsers are supported as well as Internet Explorer 8 and above.</p><p>If you run into problems with IE8, IE9 or IE10 and get a error message saying IE7 is not supported, it may be because you are running the browser in IE7 compatibility mode. Here are <a href="http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html">directions on how to change the compatibility mode</a>.</p></div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-03" class="accordion-toggle collapsed">Why is my timeline not displaying or why is it stuck at the parsing data screen?</a></div>
            <div id="faq-03" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">If you&#x27;re using a Google Spreadsheet as your source, make sure your Google spreadsheet is public and published. Also make sure you don&#x27;t have any empty rows in the spreadsheet as this can sometimes cause problems.</div>
            </div>
          </div>

<div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-non-flickr-images" class="accordion-toggle collapsed">Can I use photos that aren’t hosted on Flickr?</a></div>
            <div id="faq-non-flickr-images" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">Yes, but the photos must be publically available online and the URL must end in .jpg, .png, or .gif. Some users have found that uploading images to Dropbox is an easy and convenient way to give them a URL that’s compatible with TimelineJS.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-04" class="accordion-toggle collapsed">How many entries will work best in TimelineJS?</a></div>
            <div id="faq-04" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">TimelineJS is optimized for 20-30 entries. If you have more entries, you run a risk of slow load times. Test your timeline to make sure you are satisfied. The best remedy for slow load times may be to edit your timeline to include fewer entries or to create a series of smaller timelines. That said, some publications have built  <a href="http://blogs.lanacion.com.ar/data/herramientas/todos-los-papas-en-un-timeline-js/">timelines</a> that have hundreds of entries.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-05" class="accordion-toggle collapsed">How do I change the height of the timeline?</a></div>
            <div id="faq-05" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">You can change the height using the embed tool above. If you need more control, read the Google Group<a href="https://groups.google.com/forum/?fromgroups#!category-topic/verite-timeline/how-to/qSPDO2iJt34%5B1-25%5D">discussion</a> to learn more.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-06" class="accordion-toggle collapsed">Can I use audio or video that isn’t on YouTube, SoundCloud, Vimeo, etc?</a></div>
            <div id="faq-06" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner"> Yes. <a href="https://groups.google.com/forum/?fromgroups#!category-topic/verite-timeline/how-to/51D-CgbAcg0%5B1-25%5D">See here.</a></div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-07" class="accordion-toggle collapsed">Can I change the TimelineJS font?</a></div>
            <div id="faq-07" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">You can change the font using the embed tool above. If you’d like to make modifications that aren’t supported by embed tool you’ll need to dig in to the CSS — <a href="https://groups.google.com/forum/?fromgroups#!category-topic/verite-timeline/how-to/EAaBttHnF-g%5B1-25%5D">here's</a> a discussion that includes a few tips.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-08" class="accordion-toggle collapsed">How do I hide the bottom timeline?</a></div>
            <div id="faq-08" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">If this is your end goal it may be easier for you to use a slider tool rather than TimelineJS. Here are <a href="https://groups.google.com/forum/?fromgroups#!category-topic/verite-timeline/how-to/QyAxN2qLP0Y%5B1-25%5D">a few</a> <a href="https://groups.google.com/forum/?fromgroups#!category-topic/verite-timeline/feature-request/S00FJp9uFds%5B1-25%5D">ways</a> you can remove the timeline bar.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-09" class="accordion-toggle collapsed">How do I use TimelineJS with Wordpress?</a></div>
            <div id="faq-09" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner"><p>The TimelineJS  <a href="#embed">iFrame embed method</a> is compatible with WordPress. Some WordPress installs require users who want to paste code in to the HTML view to have an editor or administrator status — if you’re having trouble, make sure that you have sufficient permissions.</p>
<p>If you don't have the right permissions, try this <a href="https://wordpress.org/plugins/knight-lab-timelinejs/">plugin for Wordpress</a>.</p></div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-10" class="accordion-toggle collapsed">Why aren&#x27;t there thumbnails on my events?</a></div>
            <div id="faq-10" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">Thumbnails are only shown from Flickr, Youtube, Vimeo etc. That was done for performance reasons. Having a very large image file as a thumbnail really slows down the timeline. Flickr, Youtube etc have actual thumbnail sized images that can be used that don&#x27;t cause performance issues. You can also create your own thumbnails.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-12" class="accordion-toggle collapsed">Can TimelineJS be set up with time denominators other than calendar dates?</a></div>
            <div id="faq-12" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">Yes. See <a href="https://groups.google.com/forum/?hl=en&fromgroups#!category-topic/verite-timeline/hOfQwmzXA30[1-25]">here for a hacking idea</a>.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-13" class="accordion-toggle collapsed">Can I change the vertical position of an event in TimelineJS?</a></div>
            <div id="faq-13" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">Yes. See how <a href="https://groups.google.com/forum/?fromgroups#!category-topic/verite-timeline/how-to/FB8u56wFAsE">here</a>.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-14" class="accordion-toggle collapsed">Why does the timeline not show days, hours, years, etc.?</a></div>
            <div id="faq-14" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">The display of the timeline is dynamic. It chooses a time interval that best matches the number of events there are with the amount of time that is covered.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-what-are-tags" class="accordion-toggle collapsed">What are tags?</a></div>
            <div id="faq-what-are-tags" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">Tags are essentially categories. You can have up to 6 of them to categorize events on the timeline. The events on the timeline will align with their category row. <em>See the screenshot below</em> <br/><img src="{{ static_url }}/img/TimelineJSTags.jpg"></div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-15" class="accordion-toggle collapsed">Is it possible to have more than 6 tags?</a></div>
            <div id="faq-15" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">Not at the moment.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-16" class="accordion-toggle collapsed">Can I change the number of rows on the timeline?</a></div>
            <div id="faq-16" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">The default number of rows is three. If you are using tags and you have more than three tags, the number of rows increases to six.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-17" class="accordion-toggle collapsed">How can I show only the year or only the month and year for an event in my timeline?</a></div>
            <div id="faq-17" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner"><p>If you’re using the TimelineJS Google spreadsheet template, first make sure the cell you want to modify is set to Plain Text — "Format > Number > Plain Text.” Then simply enter the year (e.g. 1994) or month and year (e.g. 7/1979). </p>
<p>Earlier versions of TimelineJS required you to enter a date as January 1 of a given year to do this, but now you should just enter the full year, as explained above.</p></div>
            </div>
          </div>

<div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#bc-dates" class="accordion-toggle collapsed">How do I add B.C. dates?</a></div>
            <div id="bc-dates" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">You can add B.C. dates by using negative years. For example, -100 would be 100 B.C. Be sure to change the formatting of the cell you want to modify to Plain Text — "Format > Number > Plain Text".</div>
            </div>
          </div>          

<div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-can-i-use-excel" class="accordion-toggle collapsed">Can I use an Excel spreadsheet instead of Google Spreadsheets?</a></div>
            <div id="faq-can-i-use-excel" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">No. TimelineJS uses Google's API to access the data from the Google Spreadsheet. If you want to start your work in Excel and then copy and paste your data into a Google spreadsheet, that’ll work but the likelihood of errors increases.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-19" class="accordion-toggle collapsed">Can I use a database as the data source for TimelineJS?</a></div>
            <div id="faq-19" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">Yes. JSON is the best and safest format for feeding information into TimelineJS from a database. Just use your language of choice to create a json file from your database.</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-20" class="accordion-toggle collapsed">Can my language be added?</a></div>
            <div id="faq-20" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">Yes! Just grab a copy of <a href="https://github.com/VeriteCo/StoryJS-Core/blob/master/Language/locale/en.js">the template</a> and replace the language with the language you want to create. You can find your language&#x27;s <a href="http://spreadsheets.google.com/pub?key=p9pdwsai2hDMsLkXsoM05KQ&gid=1">two letter code</a> here. Save the file and post it to the Google Group or you can do a pull request on GitHub.</div>
            </div>
          </div>

          <div class="accordion-group">
            <div class="accordion-heading"><a data-toggle="collapse" data-parent="#accordion-faq" href="#faq-21" class="accordion-toggle collapsed">How do I include a link in my timeline?</a></div>
            <div id="faq-21" style="height: 0px;" class="accordion-body collapse">
              <div class="accordion-inner">You can include a link in the text field using the <a href="http://www.w3schools.com/html/html_links.asp">standard HTML</a> for a hyperlink.</div>
            </div>
          </div>

      </div>
    </div>
  </div>
</section>
